Add new MinimalVideoPlayer component by danielguillan · Pull Request #1425 · primer/brand

danielguillan · 2026-07-28T08:05:49Z

Summary

Resolves https://github.com/github/brand-experience/issues/383
Resolves #1437

Adds MinimalVideoPlayer, a lightweight component for short, silent videos (illustrations, product demos) that only need a play and pause control.

The component is always muted, plays inline, and hides native video controls. Automatic playback is viewport-aware and respects reduced-motion preferences.

List of notable changes:

added the new MinimalVideoPlayer component
added viewport-aware playback that pauses offscreen video and only resumes playback that was not paused manually
added reduced-motion handling that suppresses and stops automatic playback while preserving manual controls
added customizable accessible play and pause labels, native video attributes, event handlers, source children, and forwarded ref support

What should reviewers focus on?

Verify the autoplay, viewport visibility, manual pause, looping, and reduced-motion behavior.
Check that the control state, accessible labels, forwarded ref, and native video event handlers remain synchronized with playback.

Steps to test:

Open the Storybook preview.
Verify the default video plays while visible and the control toggles between play and pause.
Scroll the playing video out of view and back into view; verify it pauses and resumes.
Pause the video manually, scroll it out of view and back, and verify it remains paused.
Enable reduced motion, reload the story, and verify the video does not autoplay but can still be played manually.
Review the MinimalVideoPlayer page in the Next.js docs preview.

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there are not other open Pull Requests for the same update/change

Screenshots:

changeset-bot · 2026-07-28T08:05:55Z

🦋 Changeset detected

Latest commit: 6bedd99

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@primer/react-brand	Minor
@primer/brand-docs	Minor
@primer/brand-css	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-mcp	Minor
@primer/brand-config	Minor
@primer/brand-storybook	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-07-28T08:07:31Z

🟢 No design token changes found

github-actions · 2026-07-28T08:09:03Z

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.97 kB	102.63 kB	⬆️ +683 B (+0.7%)
UMD — full bundle (CSS)	67.96 kB	68.11 kB	⬆️ +161 B (+0.2%)
ESM — full bundle (JS + CSS)	1.59 MB	1.60 MB	⬆️ +9.95 kB (+0.6%)
ESM — tree-shaken simple (Button)	71.14 kB	71.35 kB	⬆️ +209 B (+0.3%)
ESM — tree-shaken complex (ActionMenu)	80.10 kB	80.31 kB	⬆️ +214 B (+0.3%)

github-actions · 2026-07-28T08:09:27Z

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 1 new tests, 0 removed tests, 0 improved, 0 decreased

Component/Hook	Statements	Functions	Branches	Change
`MinimalVideoPlayer`	100.0%	100.0%	100.0%	NEW

github-actions · 2026-07-28T08:18:47Z

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update to replace the previous fixtures.

Review visual differences

…nent

Copilot

Pull request overview

Adds a new MinimalVideoPlayer React component to @primer/react-brand for muted, inline, minimal-control video playback with viewport-aware autoplay and reduced-motion support, and integrates it into the FlexSuite AI Overview hero media.

Changes:

Introduces MinimalVideoPlayer (component, styles, hook) with viewport-based autoplay/pause/resume and reduced-motion handling.
Adds unit tests, Storybook stories, and visual snapshots/tests for the new component.
Updates FlexSuite AI Overview to use the new video component (plus localized play/pause strings) and stabilizes related visual tests via reduced-motion emulation.

Show a summary per file

File	Description
packages/react/src/recipes/Flexsuite/Overview/Overview.visual.spec.ts	Emulates reduced motion to keep the AI Overview visual snapshot stable with video media.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx	Swaps hero image for hero video using `MinimalVideoPlayer`.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.content.ts	Adds localized play/pause strings for the new hero video control labels.
packages/react/src/MinimalVideoPlayer/useMinimalVideoPlayback.ts	Implements viewport-aware autoplay/pausing and reduced-motion behavior.
packages/react/src/MinimalVideoPlayer/MinimalVideoPlayer.visual.spec.ts	Visual regression coverage for paused/narrow stories.
packages/react/src/MinimalVideoPlayer/MinimalVideoPlayer.tsx	New component implementation (muted, inline, hidden native controls, overlay play/pause button).
packages/react/src/MinimalVideoPlayer/MinimalVideoPlayer.test.tsx	Unit + a11y tests covering autoplay, viewport behavior, reduced motion, and event handler passthrough.
packages/react/src/MinimalVideoPlayer/MinimalVideoPlayer.stories.tsx	Default + Playground stories for Storybook controls.
packages/react/src/MinimalVideoPlayer/MinimalVideoPlayer.module.css.d.ts	Generated CSS module typings for the new component.
packages/react/src/MinimalVideoPlayer/MinimalVideoPlayer.module.css	Styles for layout and the overlay control (including forced-colors handling).
packages/react/src/MinimalVideoPlayer/MinimalVideoPlayer.features.stories.tsx	Feature stories (native `<source>`, paused/playing, custom labels, narrow viewport).
packages/react/src/MinimalVideoPlayer/index.ts	Public barrel export for the new component.
packages/react/src/index.ts	Exposes `MinimalVideoPlayer` from the package root.
packages/e2e/scripts/playwright/playwright.generate-tests.ts	Adjusts visual test generation: reduced-motion overrides + skips for nondeterministic/autoplaying stories.
apps/storybook/static/locales/pt-BR/FlexSuiteOverview.json	Adds localized play/pause labels for FlexSuite Overview hero video controls.
apps/storybook/static/locales/ja/FlexSuiteOverview.json	Adds localized play/pause labels for FlexSuite Overview hero video controls.
apps/storybook/static/locales/fr/FlexSuiteOverview.json	Adds localized play/pause labels for FlexSuite Overview hero video controls.
apps/storybook/static/locales/es/FlexSuiteOverview.json	Adds localized play/pause labels for FlexSuite Overview hero video controls.
apps/storybook/static/locales/en/FlexSuiteOverview.json	Adds localized play/pause labels for FlexSuite Overview hero video controls.
apps/storybook/static/locales/de/FlexSuiteOverview.json	Adds localized play/pause labels for FlexSuite Overview hero video controls.
apps/next-docs/content/components/MinimalVideoPlayer/index.mdx	Adds documentation page with usage and accessibility guidance.
.changeset/calm-videos-play.md	Changeset announcing the new component in `@primer/react-brand` (minor).

Review details

Files reviewed: 21/28 changed files
Comments generated: 3
Review effort level: Low

danielguillan · 2026-07-30T07:52:10Z

@jesussandreas, please note that we are still using the old play icon here. It will be automatically replaced by the new one you provided as soon as Octicons is updated and we upgrade the dependency in Primer Brand.

rezrah · 2026-08-11T10:49:24Z


 const defaultTimeout = 500 // Storybook 7 introduced a small delay in loading stories. This is to migigate the spinner showing up in screenshots.

+const reducedMotionLookup = [


Note for posterity, this should be done using NODE_ENV with a test value. That'll swap out the video with a static poster for VRT.

…-minimal-video-player-component

danielguillan added 11 commits July 27, 2026 16:10

Add new MinimalVideoPlayer component

d8aebaf

Add changeset

38fa92c

Add tests

4336b31

Update snapshots

d57542f

Add docs

d120685

Add docs thumbnails

5040e3f

Cleanup CSS

7cce90f

Update tests

88d8aa5

Add useMinimalVideoPlayback hook and cleanup

b1929ab

Fixes

83527f9

Improve ref handling

67a111b

danielguillan temporarily deployed to github-pages July 28, 2026 08:09 — with GitHub Actions Inactive

Add MinimalVideoPlayer to FlexSuite recipe

31550ad

danielguillan temporarily deployed to github-pages July 28, 2026 08:52 — with GitHub Actions Inactive

Update snapshots

2c9a565

danielguillan temporarily deployed to github-pages July 28, 2026 08:58 — with GitHub Actions Inactive

Merge branch 'main' into danielguillan/add-minimal-video-player-compo…

2f2c26f

…nent

danielguillan temporarily deployed to github-pages July 28, 2026 09:08 — with GitHub Actions Inactive

danielguillan marked this pull request as ready for review July 28, 2026 09:19

danielguillan requested a review from a team as a code owner July 28, 2026 09:19

Copilot AI review requested due to automatic review settings July 28, 2026 09:19

Copilot started reviewing on behalf of danielguillan July 28, 2026 09:20 View session

Copilot AI reviewed Jul 28, 2026

View reviewed changes

Comment thread packages/react/src/MinimalVideoPlayer/useMinimalVideoPlayback.ts Outdated

Comment thread packages/react/src/MinimalVideoPlayer/MinimalVideoPlayer.test.tsx

Comment thread packages/react/src/MinimalVideoPlayer/MinimalVideoPlayer.tsx

Address feedback

e3ecb0b

danielguillan temporarily deployed to github-pages July 28, 2026 09:37 — with GitHub Actions Inactive

danielguillan requested review from jesussandreas and rezrah July 30, 2026 07:50

danielguillan commented Jul 30, 2026

View reviewed changes

danielguillan mentioned this pull request Aug 4, 2026

🐛 [BUG] - Video play / pause brand refactor mismatch #1437

Closed

rezrah reviewed Aug 11, 2026

View reviewed changes

roll back the vrt change

3715ec1

rezrah temporarily deployed to github-pages August 11, 2026 13:29 — with GitHub Actions Inactive

update play icon

1552165

rezrah temporarily deployed to github-pages August 11, 2026 14:33 — with GitHub Actions Inactive

Merge branch 'main' of github.com:primer/brand into danielguillan/add…

6bedd99

…-minimal-video-player-component

rezrah deployed to github-pages August 11, 2026 14:59 — with GitHub Actions View deployment

rezrah approved these changes Aug 11, 2026

View reviewed changes

rezrah merged commit a486555 into main Aug 11, 2026
18 checks passed

rezrah deleted the danielguillan/add-minimal-video-player-component branch August 11, 2026 17:00

primer Bot mentioned this pull request Aug 11, 2026

Release tracking #1434

Merged

github-actions Bot mentioned this pull request Aug 12, 2026

New release available "@primer/react-brand@0.73.0" primer/brand-releases#45

Closed

22 tasks

Navigation Menu

Uh oh!

Add new MinimalVideoPlayer component - #1425

Add new MinimalVideoPlayer component#1425
rezrah merged 18 commits into
mainfrom
danielguillan/add-minimal-video-player-component

danielguillan commented Jul 28, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 28, 2026

Uh oh!

github-actions Bot commented Jul 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 28, 2026

Uh oh!

github-actions Bot commented Jul 28, 2026 •

edited

Loading

Example:

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danielguillan Jul 30, 2026 •

edited

Loading

Uh oh!

rezrah Aug 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		const defaultTimeout = 500 // Storybook 7 introduced a small delay in loading stories. This is to migigate the spinner showing up in screenshots.

		const reducedMotionLookup = [

Uh oh!

Conversation

danielguillan commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

Contributor checklist:

Reviewer checklist:

Screenshots:

Uh oh!

changeset-bot Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jul 28, 2026

🟢 No design token changes found

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Bundle size report

Uh oh!

github-actions Bot commented Jul 28, 2026

🟢 Unit test coverage changes found

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ Visual differences found

Example:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danielguillan Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rezrah Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

danielguillan commented Jul 28, 2026 •

edited

Loading

changeset-bot Bot commented Jul 28, 2026 •

edited

Loading

github-actions Bot commented Jul 28, 2026 •

edited

Loading

github-actions Bot commented Jul 28, 2026 •

edited

Loading

danielguillan Jul 30, 2026 •

edited

Loading